/*
 * @Description: 车检主页
 * @Author:shuaishuai.wang
 * @Date: 2019-07-09 18:03:07
 * @Last Modified by: shuaishuai.wang
 * @Last Modified time: 2019-10-30 18:05:55
 */
<template>
  <div class="main fontsize32">
    <index v-show="part < 1"></index>
    <record v-show="part > 0"></record>
    <!--底部菜单栏-->
    <div class="menu flex-h">
      <div @click="changePart(0)">
        <img :src="vehicleImg">
        <p
          class="fontsize20"
          :class="part < 1 ? 'choose' : ''"
        >车检服务</p>
      </div>
      <div @click="changePart(1)">
        <img :src="recordImg">
        <p
          class="fontsize20"
          :class="part > 0 ? 'choose' : ''"
        >预约记录</p>
      </div>
    </div>
  </div>
</template>
<script>
import { getUrlParams } from 'vue-xiaobu-utils'
import index from './compontents/index'
import record from './compontents/record'
export default {
  data() {
    return {
      part: 0, // 当前显示的组件
      vehicleImg: require('./assets/img/vehicle_choose.png'), // tab底部车检服务图标
      recordImg: require('./assets/img/record.png') // tab底部预约记录图标
    }
  },
  components: {
    index: index,
    record: record
  },
  mounted() { // 进入页面按照URL返回的参数选中tab
    this.changePart(getUrlParams().type || 0)
  },
  methods: {
    changePart(index) { // 按照传入的参数选中tab
      this.part = index
      if (index < 1) {
        this.vehicleImg = require('./assets/img/vehicle_choose.png')
        this.recordImg = require('./assets/img/record.png')
      } else {
        this.vehicleImg = require('./assets/img/vehicle.png')
        this.recordImg = require('./assets/img/record_choose.png')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import './../common.scss';
.main {
  height: 100%;
  position: relative;
  min-height: fill-available;
  font-family: PingFangSC-Medium;
  font-weight: 400;
  overflow: hidden;
  /*底部菜单*/
  .menu {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: $bgColorDiv;
    z-index: 999;
    div {
      width: 100%;
      margin: 8px 0;
      text-align: center;
      img {
        width: 60px;
        margin: auto;
      }
      p {
        color: #8e8e93;
      }
      .choose {
        color: $themeColors;
      }
    }
  }
}
</style>
